<template>
  <view class="classroom-container">
    <view class="filter-section">
      <view class="filter-item">
        <text class="label">日期</text>
        <picker mode="date" :value="filter.date" @change="onDateChange">
          <view class="picker-value">{{ filter.date }}</view>
        </picker>
      </view>
      
      <view class="filter-item">
        <text class="label">时间段</text>
        <picker :value="filter.timeIndex" :range="timeSlots" @change="onTimeChange">
          <view class="picker-value">{{ timeSlots[filter.timeIndex] }}</view>
        </picker>
      </view>
      
      <button class="search-btn" @click="loadClassrooms">查询</button>
    </view>

    <view class="classroom-list">
      <view 
        v-for="room in filteredClassrooms" 
        :key="room.id"
        class="classroom-card"
        :class="{ disabled: room.status !== '空闲' }"
      >
        <view class="card-header">
          <text class="room-name">{{ room.name }}</text>
          <text class="room-status" :class="getStatusClass(room.status)">{{ room.status }}</text>
        </view>
        
        <view class="card-content">
          <view class="room-info">
            <text class="info-item">容量: {{ room.capacity }}人</text>
            <text class="info-item">设备: {{ room.equipment.join(', ') }}</text>
            <text class="info-item" v-if="room.currentCourse">当前课程: {{ room.currentCourse }}</text>
          </view>
          
          <button 
            class="reserve-btn"
            :disabled="room.status !== '空闲'"
            @click="onReserve(room)"
          >
            {{ room.status === '空闲' ? '立即预约' : '不可预约' }}
          </button>
        </view>
      </view>
    </view>

    <!-- 预约弹窗 -->
    <uni-popup ref="reservePopup" type="dialog">
      <view class="reserve-dialog" v-if="selectedRoom">
        <text class="dialog-title">预约教室</text>
        
        <view class="dialog-content">
          <view class="reserve-info">
            <text class="info-label">教室：</text>
            <text class="info-value">{{ selectedRoom.name }}</text>
          </view>
          
          <view class="reserve-info">
            <text class="info-label">日期：</text>
            <text class="info-value">{{ filter.date }}</text>
          </view>
          
          <view class="reserve-info">
            <text class="info-label">时间：</text>
            <text class="info-value">{{ getSelectedTimeRange() }}</text>
          </view>
          
          <view class="form-item">
            <text class="label">预约用途</text>
            <textarea 
              v-model="reserveForm.purpose" 
              placeholder="请输入预约用途" 
              class="purpose-input"
            />
          </view>
        </view>
        
        <view class="dialog-actions">
          <button class="btn cancel" @click="cancelReserve">取消</button>
          <button class="btn confirm" @click="confirmReserve">确认预约</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { api } from '@/utils/request.js'

export default {
  data() {
    const today = new Date()
    const dateStr = today.toISOString().split('T')[0]
    
    return {
      filter: {
        date: dateStr,
        timeIndex: 2 // 默认选择下午时段
      },
      timeSlots: ['08:00-10:00', '10:00-12:00', '14:00-16:00', '16:00-18:00', '19:00-21:00'],
      classrooms: [],
      selectedRoom: null,
      reserveForm: {
        purpose: ''
      }
    }
  },
  
  computed: {
    filteredClassrooms() {
      return this.classrooms.filter(room => {
        // 这里可以根据日期和时间进行筛选
        // 由于Mock数据可能不包含时间信息，暂时返回所有教室
        return true
      })
    }
  },
  
  onLoad() {
    this.loadClassrooms()
  },
  
  onPullDownRefresh() {
    this.loadClassrooms().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  
  methods: {
    async loadClassrooms() {
      try {
        uni.showLoading({ title: '加载中...' })
        const res = await api.getClassrooms()
        if (res.code === 200) {
          this.classrooms = res.data
        }
      } catch (error) {
        console.error('加载教室列表失败:', error)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    
    getStatusClass(status) {
      const classMap = {
        '空闲': 'status-free',
        '使用中': 'status-busy',
        '已预约': 'status-reserved',
        '维护中': 'status-maintenance'
      }
      return classMap[status] || ''
    },
    
    onReserve(room) {
      this.selectedRoom = room
      this.reserveForm.purpose = ''
      this.$refs.reservePopup.open()
    },
    
    async confirmReserve() {
      if (!this.reserveForm.purpose) {
        uni.showToast({ title: '请输入预约用途', icon: 'none' })
        return
      }
      
      try {
        const [startTime, endTime] = this.timeSlots[this.filter.timeIndex].split('-')
        
        const res = await api.reserveClassroom({
          classroomId: this.selectedRoom.id,
          date: this.filter.date,
          startTime: startTime,
          endTime: endTime,
          purpose: this.reserveForm.purpose
        })
        
        if (res.code === 200) {
          uni.showToast({ title: '预约成功', icon: 'success' })
          this.$refs.reservePopup.close()
          this.loadClassrooms() // 刷新列表
        }
      } catch (error) {
        uni.showToast({ 
          title: error.message || '预约失败', 
          icon: 'none' 
        })
      }
    },
    
    cancelReserve() {
      this.$refs.reservePopup.close()
    },
    
    onDateChange(e) {
      this.filter.date = e.detail.value
    },
    
    onTimeChange(e) {
      this.filter.timeIndex = e.detail.value
    },
    
    getSelectedTimeRange() {
      return this.timeSlots[this.filter.timeIndex]
    }
  }
}
</script>

<style scoped>
.classroom-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.filter-section {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.filter-item {
  flex: 1;
}

.label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.picker-value {
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  text-align: center;
}

.search-btn {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
}

.classroom-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.classroom-card {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.classroom-card.disabled {
  opacity: 0.6;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.room-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.room-status {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.status-free {
  background: #e8f5e8;
  color: #4caf50;
}

.status-busy {
  background: #ffebee;
  color: #f44336;
}

.status-reserved {
  background: #fff3e0;
  color: #ff9800;
}

.status-maintenance {
  background: #f5f5f5;
  color: #9e9e9e;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.room-info {
  flex: 1;
}

.info-item {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.reserve-btn {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 24rpx;
}

.reserve-btn:disabled {
  background: #ccc;
}

.reserve-dialog {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;
}

.dialog-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.reserve-info {
  display: flex;
  margin-bottom: 20rpx;
}

.info-label {
  font-weight: bold;
  color: #333;
  min-width: 100rpx;
}

.info-value {
  color: #666;
  flex: 1;
}

.form-item {
  margin-top: 30rpx;
}

.purpose-input {
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  height: 120rpx;
  width: 100%;
  box-sizing: border-box;
}

.dialog-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

.btn {
  flex: 1;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.cancel {
  background: #f5f5f5;
  color: #666;
}

.confirm {
  background: #667eea;
  color: white;
}
</style>